<template>
  <div class="table-content">

    <el-table
      :data="dataList"
      ref="multipleTableRef"
      @selection-change="selectionChange"
      :row-class-name="rowClass"
      :border="true"
      height22="props.tableHeight"
      @row-click="handleCurrentChange" 
      @header-click="sortByPhone"

    >
      <el-table-column type="selection" width="55" highlight-current-row />

      <el-table-column prop="index" width="60" label="序号" fixed>
        <template #default="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <template v-for="item in props.tableHeader.selected">
        <el-table-column
          v-if="getTableColParam(item.colname, 'width')"
          :show-overflow-tooltip="getTableColParam(item.colname, 'tooltip')"
          :prop="item.colname"
   
          :label-class-name="item.colname=='telephone'?'phone':''"
          :label="item.titile"
          :width="getTableColParam(item.colname, 'width')"
        >
          <template v-if="item.colname=='orderNumber'" #default="scope">
            <el-link type="primary" @click="clickOrderNumber(scope.row)">{{
              scope.row.orderNumber
            }}</el-link>
          </template>
          <template v-if="item.colname=='telephone'" #header>
              {{item.titile}}
              <el-icon class="header-sort-btn"><Sort /></el-icon>
          </template>
          
          </el-table-column
        >

        <el-table-column
          v-if="getTableColParam(item.colname, 'minWidth')"
          :show-overflow-tooltip="getTableColParam(item.colname, 'tooltip')"
          :prop="item.colname"
          :label="item.titile"
          :min-width="getTableColParam(item.colname, 'minWidth')"
        />
      </template>
    </el-table>

  </div>
</template>
<script setup>
import { ref, nextTick, computed, reactive, watch, toRaw } from "vue";
import { specialMarkOptions, orderStatusOptions } from "@/plugin/dict";
import { formatDate } from "@/plugin/util";
import dict from "@/plugin/dict";

const multipleTableRef = ref(null);
const selectRow = reactive({
  list: [],
}); //选中的行
// 弹窗
const dialogOption = reactive({
  show: false,
  order: {},
});
const props = defineProps({
  tableData: {
    type: Array,
    default: [],
  },
  tableHeight: {
    default: "calc(100vh - 260px)",
  },
  tableHeader: {
    type: Array,
    default: [],
  },
});

const emits = defineEmits(["clickEditUser", "sortByPhone"]);

// 暴露已选项
const exposeCheckedList = ref([]);
const editHeaderRef = ref();
const editSortRef = ref();

// 处理表格数据
const dataList = computed(() => {
  props.tableData.forEach((val) => {
    try {
      val.orderStatus_show =
        orderStatusOptions.find((item) => item.value == val.orderStatus)
          ?.label || val.orderStatus;
      val.telephone = isNaN(Number(val.telephone))
        ? val.telephone
        : Number(val.telephone);

      let orderTagArr;
      if (val.orderTag instanceof Array) {
        orderTagArr = val.orderTag;
      } else {
        orderTagArr = val.orderTag.replace("[", "").replace("]", "").split(",");
      }
      orderTagArr = Array.from(new Set(orderTagArr)); // 去重
      let orderTag_show = "";
      orderTagArr.forEach((orderTag) => {
        let label = specialMarkOptions.find(
          (item) => item.value == orderTag.trim()
        )?.label;
        if (label) {
          orderTag_show += "，" + label;
        }
      });
      val.orderTag_show = orderTag_show.replace("，", "");
    } catch (error) {}
  });

  nextTick(() => {
    // 默认全选
    // multipleTableRef.value.toggleAllSelection();
  });

  return props.tableData;
});
defineExpose({
  checkedList: exposeCheckedList,
});

//点击行选中
function handleCurrentChange(row){
 console.log( exposeCheckedList.value.includes(row))
 if( !exposeCheckedList.value.includes(row)){ //当前行未被勾选时
  multipleTableRef.value.toggleRowSelection(row);
 }

}


// 格式化时间显示
function formatDateForTime(obj, attr) {
  if (obj[attr]) {
    obj[attr] = formatDate(new Date(obj[attr]), "yyyy-MM-dd hh:mm:ss");
  }
}
//获取表头配置
function getTableColParam(props, type) {
  let arr = dict.tableHeaderWidth;
  let str = "";
  arr.forEach((item) => {
    if (item.props == props) {
      str = item[type] ? item[type] : "";
    }
  });

  return str;
}
//电话排序
function sortByPhone(col) {
  if (col.label == "手机号码") {
    emits("sortByPhone");
  }
}
watch(exposeCheckedList, (newVal, oldVal) => {
  selectRow.list = [];
  if (newVal.length > 0) {
    newVal.forEach((item, index) => {
      selectRow.list.push(item.orderNumber);
    });
  }
});
//勾选数据行的 Checkbox 时触发的事件
function rowClass({ row, rowIndex }) {
  if (selectRow.list.includes(row.orderNumber)) {
    return "slecleRowColor";
  }
}
// 选择项变化
function selectionChange(selection) {
  exposeCheckedList.value = selection;
  console.log(exposeCheckedList.value);
}
//弹出框

// 点击工单编号，弹出评论弹窗
function clickOrderNumber(order) {
  dialogOption.order = order;
  dialogOption.show = true;
}
</script>

<style lang="scss" scoped>
.table-content {
  
  
}
@media screen and (max-width: 1760px) {
  // 适用于<所有订单>页面
  .fixed-height,
  .fixed-height :deep(.el-table__inner-wrapper) {
    height: 370px !important;
  }

}
  //table选中高亮
   :deep(.slecleRowColor td )  {
    background-color: #568cf1 !important;
    color: white;
    .el-link__inner{
      color: white;
    }

  }
  //改变element ui自带的hover高亮颜色
  .el-table :deep(tbody tr:hover > td) {
    background-color: #568cf1 !important;
    cursor: pointer;
    color: white;
    .el-link__inner{
      color: white;
    }
  }
  
.el-table :deep(.header-sort-btn){
    position: relative;
    top: 3px;
  }
  :deep(.phone:hover){
    cursor: pointer;
  }
</style>
